<template>
  <section id="userInfor">
    <div class="userInforHeader">
      <img src="../../../../static/images/o_1bkot63pb1tdj1jt01hf01ie7d2m7.png" alt srcset>
      <div class="userInforIn" @click="$router.push({path:'/personalCenter'})">
        <span>陈素然</span>
        <span>综合管理部</span>
      </div>
      <svg class="icon iconsty" aria-hidden="true">
        <use xlink:href="#icon-test146"></use>
      </svg>
    </div>
    <div class="userInforbottom">
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test328"></use>
        </svg>
        <span @click="$router.push({path:'/'})">切换账号</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test301"></use>
        </svg>
        <span>在线客服</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test355"></use>
        </svg>
        <span>电话咨询</span>
        <span>0755-2665 9381</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test284"></use>
        </svg>
        <span>新手引导</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test275"></use>
        </svg>
        <span>帮助中心</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test315"></use>
        </svg>
        <span @click="slideIn">主题设置</span>
      </div>
      <div>
        <svg class="icon iconsty" aria-hidden="true">
          <use xlink:href="#icon-test269"></use>
        </svg>
        <span @click="$router.push({path:'/'})">退出登录</span>
      </div>
    </div>
    <ItemTheme
      id="f"
      @childByValue="childByValue"
      @childByiteamColor="childByiteamColor"
      v-show="trueShuo"
    ></ItemTheme>
    <div class="zheAll" v-show="trueShuo" @click="slideOut"></div>
  </section>
</template>

<script>
import ItemTheme from '@/components/common/itemTheme/ItemTheme'
export default {
  components: {
    ItemTheme
  },
  data () {
    return {
      // 显示隐藏遮罩层
      trueShuo: false,
      themeColor: '#20ADE5'
    }
  },
  watch: {
    themeColor () {
      this.$emit('childByThemeColor', this.themeColor)
    }
  },
  methods: {
    slideOut () {
      this.$Jquery('#f').removeClass('song animated slideInRight')
      this.$Jquery('#f').addClass('song animated slideOutRight')
      this.trueShuo = false
    },
    slideIn () {
      this.trueShuo = true
      this.$Jquery('#f').removeClass('song animated slideOutRight')
      this.$Jquery('#f').addClass('song animated slideInRight')
    },
    childByValue (el) {
      if (el === true) {
        this.slideOut()
      }
    },
    childByiteamColor (val) {
      this.themeColor = val
    }
  }
}
</script>

<style lang="scss" scoped>
#userInfor {
  position: absolute;
  right: 15px;
  top: 60px;
  z-index: 10;
  width: 250px;
  height: 346px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px #adadad;
}
.userInforHeader {
  width: 100%;
  height: 66px;
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.userInforHeader > img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.userInforIn {
  width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.userInforIn:hover {
  cursor: pointer;
}
.userInforIn > span:nth-child(1) {
  font-size: 16px;
  color: #333333;
  margin-bottom: 8px;
}
.userInforIn > span:nth-child(2) {
  font-size: 12px;
  color: #999999;
}
.userInforbottom {
  width: 100%;
  height: 279px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  color: #333333;
  font-size: 14px;
}
.userInforbottom > div {
  width: 100%;
  height: 36px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.userInforbottom > div:hover {
  cursor: pointer;
}
.userInforbottom > div > span:nth-child(2) {
  margin-right: 15px;
}
.userInforbottom > div > span:nth-child(3) {
  color: #999999;
  font-size: 12px;
}
.iconsty {
  margin: 0 15px;
}
.song {
  position: absolute;
  right: -15px;
  top: 0;
  z-index: 12;
  width: 340px;
  height: calc(100vh - 60px);
  background: #ffffff;
}
.showH {
  display: none;
}
.zheAll {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>
